import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { getAuthorization } from "./axios";
const my_top = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/my_top.png"
const my_1 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/s1.png"
const my_2 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/s2.png"
const my_3 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/s3.png"
const my_4 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/s4.png"
const my_4_hui = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/s4_hui.png"
const s_top = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/s_top.png"
const X = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/x.png"

function Home() {
  const history = useHistory();
  const [data] = useState(JSON.parse(getAuthorization()));
  const [isF, setIsF] = useState(false);
  const [list] = useState([
    {
      img: my_1,
      name: "报名",
      url: "https://www.wjx.cn/vm/hs1OgDE.aspx#"
    },
    {
      img: my_2,
      name: "攻略",
      url: "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/gonglue.jpg?v=1.0.0"
    },
    {
      img: my_3,
      name: "集市",
      url: "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/jishigonglue.jpg"
    },
    {
      img: my_4,
      name: "高光",
      url: ""
    }
  ]);
  const [kuang, setKuang] = useState();
  const [zanwei, setZanwei] = useState(false);
  return (
    <div className="home my">
      <div className="back">
        <img
          onClick={() => {
            history.go(-1);
          }}
          src={X}
        />
      </div>
      <div className="ban1">
        <img src={s_top} />
      </div>
      <div className="home_main my_main">

        <div className="home_con">

          <div className="my_con_all">
            {list?.map((item, index) => {
              return (
                <div key={index}>
                  <img
                    onClick={() => {
                      if(item.name == "报名"){
                        // window.location.href = item.url
                        setIsF(true)
                      }
                      if(item.name == "攻略"){
                        setKuang(item.url)
                      }
                      if(item.name == "集市"){
                        setKuang(item.url)
                      }
                      if(item.name == "高光"){
                        history.push("/light")
                      }
                      
                    }}
                    src={item.img}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </div>
      {kuang && ( // 弹窗 （满屏 jieshao | 中屏 jieshaoC）
        <div className="jieshao_box" style={{ zIndex: "100000" }}>
          <div className="back">
            <img onClick={() => { setKuang(false); }} src={X} />
          </div>
          <div className="jieshao">
            <img src={kuang} />
          </div>
        </div>
      )}
      {isF && <div className="myIf_box">
        <div className="back">
            <img onClick={() => { setIsF(false); }} src={X} />
          </div>
        <iframe className="myIf" src="https://www.wjx.cn/vm/hs1OgDE.aspx#"></iframe>
      </div>}

      {zanwei && <div className="zanwei_box" style={{ zIndex: "10009" }} onClick={() => {
        setZanwei(false)
      }}>
        <div className="jieshao">
          <img src={"https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/zanwei.png"} />
        </div>
      </div>}
    </div>
  );
}

export default Home;
